<template>
    <div class="component-user">
        <modal
            :show='show'
            mode='bottom'
            closeButton
            @close='closeUser'>
            <div class="component-user__header">借款人信息</div>
                <p class="component-user__tips">本平台提供以下信息，帮助您进行逾期催收</p>
                <p class="component-user__title">基础信息</p>
                <div class="component-user__list">
                <p class="component-user__item">
                    <span class="component-user__key">姓名</span>
                    <span class="component-user__value full"><span class="component-user__value-item">{{info.name}}</span></span>
                </p>
                <p class="component-user__item">
                    <span class="component-user__key">身份证号</span>
                    <span class="component-user__value full"><span class="component-user__value-item">{{info.idNumber}}</span></span>
                </p>
                <p class="component-user__item">
                    <span class="component-user__key">手机号</span>
                    <span class="component-user__value full"><span class="component-user__value-item">{{info.mobile}}</span></span>
                </p>
                <p class="component-user__item">
                    <span class="component-user__key">微信号</span>
                    <span class="component-user__value full"><span class="component-user__value-item">{{info.weixinNo}}</span></span>
                </p>
                <p class="component-user__item">
                    <span class="component-user__key">现居地</span>
                    <span class="component-user__value full"><span class="component-user__value-item">{{info.address}}</span></span>
                </p>
            </div>
            <p class="component-user__title">紧急联系人信息</p>
            <div class="component-user__list">
                <p class="component-user__item">
                    <span class="component-user__key">姓名</span>
                    <span class="component-user__value">
                        <span class="component-user__value-item">{{info.contact1Name}}</span>
                        <span class="component-user__value-item">{{info.contact2Name}}</span>
                    </span>
                </p>
                <p class="component-user__item">
                    <span class="component-user__key">与本人的关系</span>
                    <span class="component-user__value">
                        <span class="component-user__value-item">{{info.contact1Relation}}</span>
                        <span class="component-user__value-item">{{info.contact2Relation}}</span>
                    </span>
                </p>
                <p class="component-user__item">
                    <span class="component-user__key">联系方式</span>
                    <span class="component-user__value">
                        <span class="component-user__value-item">{{info.contact1Mobile}}</span>
                        <span class="component-user__value-item">{{info.contact2Mobile}}</span>
                    </span>
                </p>
                <p class="component-user__item">
                    <span class="component-user__key">半年内通话</span>
                    <span class="component-user__value">
                        <span class="component-user__value-item">{{info.contact1CallCount}}</span>
                        <span class="component-user__value-item">{{info.contact2CallCount}}</span>
                    </span>
                </p>
            </div>
            <template v-if='carrier && carrier.callRank && carrier.callRank.length'>
                <p class="component-user__title">常用联系号码（近6个月）</p>
                <div class="component-user__list">
                    <p class="component-user__item">
                        <span class="component-user__key">号码</span>
                        <span class="component-user__value">
                            <span class="component-user__value-item">次数</span>
                        </span>
                    </p>
                    <p class="component-user__item" v-for='(item,index) in carrier.callRank'>
                        <span class="component-user__key">{{index+1}}. {{item.mobile}}</span>
                        <span class="component-user__value">
                            <span class="component-user__value-item">{{item.count}}</span>
                        </span>
                    </p>
                </div>
            </template>
            <template v-if='ec && ec.address && ec.address.length'>
                <p class="component-user__title">详细收货地址</p>
                <div class="component-user__list no-border">
                    <p class="component-user__item" v-for='(item,index) in ec.address'>
                        <span class="component-user__value">{{index+1}}. {{item}}</span>
                    </p>
                </div>
            </template>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import modal from '../components/Modal.vue'
    import checkBox from '../components/CheckBox.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import toYuan from '../filters/filter-toYuan'
    import dateFormat from '../filters/filter-dateFormat'
    import  { mapGetters, mapActions }  from 'vuex'
    import { allApi, reportApi } from '../api/api'
    import moment from 'moment'

    export default {
        name:'User',
        components:{
            modal,
            checkBox
        },
        filters:{
            toYuan,
            dateFormat,
        },
        props: {
            show: {
                type: Boolean,
                required: true,
                default:false
            },
            number: {
                type: String,
                default:''
            },
        },
        data() {
            return {
                all:false,
                info:{},
                carrier:{},
                ec:{}
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),

            totalPrice(){
                let price = 0
                _.each(this.value,(value,index)=>{
                    if(value.check == true){
                        price = price + value.repayAmount
                    }
                })
                return price
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // function

            diffDay(time){
                let now = moment()
                let diff = moment(time)
                let diffDays = diff.diff(now,'days')
                let diffTime = diff.diff(now)
                return diffDays
            },
            toggleAllPlatform($event){
                if($event){
                    _.each(this.value,(val,index)=> {
                        this.value[index].check = true
                    })
                }
                else{
                    _.each(this.value,(value,index)=> {
                        this.value[index].check = false
                    })
                }
            },
            closeUser(){
                this.$emit('close')
            },
            finish(){
                let check = _.filter(this.value,(val,index)=>{
                    return val.check == true
                })
                if(!check.length){
                    this.setMsgTip({
                        text:'未选择还款项目！',
                        type:'warn'
                    })
                    return
                }
                this.$emit('finish')
            }
        },
        created(){
            reportApi.boxTool({
                creditReportNo:this.number
            })
            .then(result=>{
                this.info = result.userInfo
                this.carrier = result.carrier
                this.ec = result.ec
            })
            .catch(error => {
                console.error(error)
            })
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .component-user{
        .component-user__header{
            @extend %font-title;
            color:$importColor;
            padding-bottom: 16px;
            text-align: center;
        }
        .component-user__tips{
            text-align:center;
            @extend %font-caption;
        }
        .component-user__title{
            padding:16px 0 8px 0;
            color:$importColor;
            border-bottom:1px solid $sectionColor;
        }
        .component-user__list{
            padding:8px 0; 
            border-bottom:1px solid $sectionColor;
            &.no-border{
                border-bottom: none;
            }
        }
        .component-user__item{
            @extend %font-body1;
            display: flex;
            justify-content: space-between;
            padding:4px 0;
        }
        .component-user__key{
            width: 8em;
        }
        .component-user__value{
            flex:1;
            color:$importColor;
            text-align: right;
            display: flex;
        }
        .component-user__value-item{
            text-align: right;
            width: 50%;
            flex:1;
            &.full{
                width: auto;
            }
        }
    }

</style>
